<!DOCTYPE html>
<html lang="en">
<head>
    <title>服务号-菜单列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>

        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            padding: 0 0px;
            height: 24px;
            vertical-align: middle;
        }
        .table-inner{
            width:100%;
        }
        .table-inner td{
            border-bottom: 1px solid #bbbbbb;
        }
        .table-inner .lastTd{
            border-bottom: 0px solid #bbbbbb;
        }
    </style>

</head>
<body>
<section class="content" id="list">
    <div class="box-header" style="text-align:right;padding-bottom: 10px;">
        <input type="button" value="自定义菜单" id="init_all" class="btn oaBtn btn-sm " @click="initAll()">
        <input type="button" value="删除当前菜单" id="del_all" class="btn oaBtn btn-sm " @click="delAll()">
    </div>

    <div class="box-body no-padding" style="overflow: auto;background: #fff;">
        <table class="table table-hover table-bordered" cellspacing= "0">
            <thead>
            <tr>
                <th style="width: 30px;text-align: center">一级菜单</th>
                <th style="width: 10px;text-align: center">一级菜单操作</th>
                <th style="width: 30px;text-align: center">二级菜单</th>
                <th style="width: 30px;text-align: center">动作类型</th>
                <th style="width: 30px;text-align: center">网页url</th>
                <th style="width: 10px;text-align: center">二级菜单操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(name, i) in first_menu_list">
                <td style="text-align: center">{{name}}</td>
                <td style="text-align: center">
                    <a href="javascript:void(0);" @click="edit_first_menu(true, name, original_list)">修改</a>
                    <a href="javascript:void(0);" @click="del_first_menu(name)">删除</a>
                </td>
                <td style="text-align: center">
                    <table class="table-inner" cellspacing="0">
                        <tr v-for="(item, j) in type_menu_list[i]">
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''">{{item.name}}</td>
                        </tr>
                    </table>
                </td>
                <td style="text-align: center">
                    <table class="table-inner">
                        <tr v-for="(item, j) in type_menu_list[i]">
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''" v-if="item.type == 'view'">跳转至网页</td>
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''" v-else-if="item.type == 'click'">点击类型</td>
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''" v-else-if="item.type == 'miniprogram'">跳转至小程序</td>
                        </tr>
                    </table>
                </td>
                <td style="text-align: center">
                    <table class="table-inner">
                        <tr v-for="(item, j) in type_menu_list[i]">
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''">{{item.url}}</td>
                        </tr>
                    </table>
                </td>
                <td style="text-align: center">
                    <table class="table-inner">
                        <tr v-for="(item, j) in type_menu_list[i]">
                            <td :class="j==type_menu_list[i].length-1 ? 'lastTd' : ''">
                                <a href="javascript:void(0);" @click="edit_second_menu(false, item, original_list)">修改</a>
                                <a href="javascript:void(0);" @click="del_second_menu(item)">删除</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#list',
        data: {
            first_menu_list:"",
            type_menu_list:"",
            original_list:""
        },
        methods: {
            refresh: function () {
                this.initList();
            },
            //  自定义菜单
            initAll: function () {
                $.dialog({

                    content: 'url:createmenu.html',
                    title: '自定义菜单',
                    width: 600,
                    height: 500,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  删除当前菜单
            delAll: function () {
                if (confirm("你确定删除当前菜单吗？")) {
                    var that = this;
                    $.wyui.postMethod("/serviceAccountMenu/deleteMenu.json", null, function (r) {
                        if(r["errcode"] == "0"){
                            alert("操作成功");
                            that.initList();
                        }else {
                            alert("操作失败，请重试！");
                        }
                    });
                }else {
                    return;
                }
            },
            //  删除一级菜单
            del_first_menu: function (name) {

                var buttons = this.original_list["button"];
                for (var i in buttons){

                    var temp_name = buttons[i]["name"];
                    if(name == temp_name){
                        this.original_list["button"].splice(i,1);
                    }
                }
                var that = this;
                //  如果是最后一条记录，则删除全部
                if (that.original_list["button"].length == 0){
                    that.delAll();
                    return;
                }
                //  处理完删除数据之后需要重新创建menu
                $.wyui.postMethod("/serviceAccountMenu/createMenu.json", this.original_list, function (r) {
                    if(r["errcode"] == "0"){
                        alert("操作成功");
                        that.initList();
                    }else {
                        alert("操作失败，请重试！");
                    }
                });
            },
            //  编辑一级菜单
            edit_first_menu: function (isFirst, name, original_list) {
                var original_list_string = JSON.stringify(original_list);
                $.dialog({

                    content: 'url:detail.html?isFirst=' + isFirst + '&name=' + name + '&data=' + original_list_string,
                    title: '修改一级菜单',
                    width: 500,
                    height: 100,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  删除二级菜单
            del_second_menu: function (item) {
                var buttons = this.original_list["button"];
                for (var i in buttons){
                    var subButtons = buttons[i]["sub_button"];
                    for(var j in subButtons){
                        var name = subButtons[j]["name"];
                        if(name == item.name){
                            this.original_list["button"][i]["sub_button"].splice(j,1);
                        }
                    }
                }
                var that = this;
                console.log(that.original_list);
                //  最后一条记录时，提示删除全部
                if (that.original_list["button"].length == 0 || (that.original_list["button"].length == 1 && that.original_list["button"][0]["sub_button"].length == 0)){
                    that.delAll();
                    return;
                }
                //  处理完删除数据之后需要重新创建menu
                $.wyui.postMethod("/serviceAccountMenu/createMenu.json", that.original_list, function (r) {
                    console.log(r);
                    if(r["errcode"] == "0"){
                        alert("操作成功");
                        that.initList();
                    }else {
                        alert("操作失败，请重试！");
                    }
                });
            },
            //  编辑二级菜单
            edit_second_menu: function (isFirst, item, original_list) {
                var item_string = JSON.stringify(item);
                var original_list_string = JSON.stringify(original_list);
                $.dialog({

                    content: 'url:detail.html?isFirst=' + isFirst + '&item=' + item_string + '&data=' + original_list_string,
                    title: '修改二级菜单',
                    width: 500,
                    height: 150,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  初始化菜单
            initList: function () {

                var that = this;

                $.wyui.postMethod("/serviceAccountMenu/getMenu.json", null, function (r) {

                    if(r["menu"] == null){
                        if (confirm("当前还没有定义菜单，您可以通过自定义菜单创建菜单，您要定义菜单吗？")) {
                            that.initAll();
                            return;
                        }else {
                            that.first_menu_list = [];
                            that.type_menu_list = [];
                            return;
                        }
                    }
                    that.original_list = r["menu"];
                    var jsonArr = r["menu"]["button"];
                    var first_menu_list = new Array();
                    var type_menu_list = new Array();
                    for (i in jsonArr){
                        //  一级菜单
                        first_menu_list.push(jsonArr[i]["name"]);

                        //  二级菜单
                        var second_jsonArr = jsonArr[i]["sub_button"];
                        var temp_type_arr = new Array();
                        for (j in second_jsonArr){
                            temp_typeAndKey_Dic = {};
                            var key = second_jsonArr[j]["key"];
                            if (key == null || key.length == 0){
                                key = "无";
                            }
                            temp_typeAndKey_Dic["key"] = key;

                            var url = second_jsonArr[j]["url"];
                            if (url == null || url.length == 0){
                                url = "无";
                            }
                            temp_typeAndKey_Dic["url"] = url;
                            temp_typeAndKey_Dic["type"] = second_jsonArr[j]["type"];
                            temp_typeAndKey_Dic["name"] = second_jsonArr[j]["name"];
                            temp_type_arr.push(temp_typeAndKey_Dic)
                        }
                        type_menu_list.push(temp_type_arr);
                    }
                    that.first_menu_list = first_menu_list;
                    that.type_menu_list = type_menu_list;
                });
            }
        },

        mounted: function () {
            this.initList();
        }
    });
</script>

</body>
</html>